<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        table{
            /* 设置表格的 宽, 每个列 将会自适应起来 */
            /* 设置 表格 每一列的 字体在 表格内 居中 */
            width: 800px;
            text-align: center;
            margin: 0 auto;
        }

        input{
            /* 不能给 checkbox 设置 高  否则 样式 不太对 */
            width: 50px;
            text-align: center;
        }
    </style>
</head>
<body>

    <div id="app">
        <!-- border 是给表格设置边框  cellspacing 是让表格边框合起来 -->
        <table border='1' cellspacing="0">
            <thead>
                <!-- thead 有一行 7 列 -->
              <tr>
                    <td>
                        <input type="checkbox">
                        全选
                    </td>
                    <td>id</td>
                    <td>名称</td>
                    <td>价格</td>
                    <td>数量</td>
                    <td>小计</td>
                    <td>操作</td> 
              </tr>
            </thead>

            <tbody>
                <tr v-for="(item, index) in cart"> 
                    <td>
                        <input type="checkbox">
                    </td>
                    <td> {{ item.id }}</td>
                    <td> {{ item.title }} </td>
                    <td> {{ item.price }} </td>
                    <td> 
                       <button @click="sub(item.id)">-</button>
                        <input type="text" :value="item.number">
                       <button @click="add(item.id)">+</button>
                    </td>
                    <td> {{ (item.price * item.number).toFixed(2) }} </td>
                    <td>
                        <button @click="delHandler(item.id)">删除</button>
                    </td>
                </tr>
            </tbody>

            <tfoot>
                <!-- tfoot 也是一行, 但是只有三列 -->
                <!-- colspan 属性  横向占据几个单元格(横向合并几个单元格) -->
                <!-- aligh='right'  在单元格中居右排列 -->
                <tr>
                    <td>
                        <input type="checkbox"> 全选
                    </td>
                    <td colspan="2">
                        <button>删除所有已选中</button>
                    </td>
                    <td colspan="4" align="right">
                        总件数: {{ totalCount }} 件
                        &emsp;
                        总价: ￥{{ total }}
                    </td>
                </tr>
            </tfoot>

        </table>

    </div>









    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>

        const list = [
            { id: 1, title: '电脑', price: 100, number: 3, isSelect: true },
            { id: 2, title: '手机', price: 85.23, number: 5, isSelect: false },
            { id: 3, title: '手表', price: 79.56, number: 1, isSelect: true }
        ]

        new Vue({
            el: '#app',

            data:{
               cart: list,  // 把 List 的数据 传递给 data 中的 cart
            },

            methods:{
               // 在调用这个函数的 时候  把当时渲染的 那个 商品的 id 作为实参传递进来
               // 有了实参, 此时的形参就是 当点击 + 的时候, 那条商品的 id
               /* 从 this.cart(data.cart) 中找到 一条数据
                  哪一条数据?
                  item 那一条的 id === 传进来的 id 的那一条
               */
               // 里面的number 进行 减 1
               // 数据驱动视图
                add(id){
                   const info = this.cart.find(item => item.id === id)
                   info.number++
                },

                sub(id){
                    /*
                    从 this.cart 中找到一项
                    找到哪一项?
                    item.id === 传进来的id  的那一项

                    如果那一项的 数量 <= 1 return
                    否则 --
                    */
                    const info = this.cart.find(item => item.id === id)
                    if(info.number <= 1) return alert('不能再少了')
                    // 代码来到这里, 说明 比 1 大
                    info.number--
                },

                delHandler (id) {
                   // 要删除的数据 id 有了
                   this.cart = this.cart.filter(item => item.id !== id)
                },
            },

            computed: {
              total () {
                  let total = 0
                  this.cart.forEach(item => {
                  total += item.price * item.number
              })
                  return total.toFixed(2)
              },

              totalCount(){
                let totalCount = 0
                this.cart.forEach(item => {
                    totalCount += item.number
                })
                return totalCount
              }
            }
        })

    </script>
</body>
</html>